<template>
  <div class="c-pageContainer">
    <div class="c-tablePanel">
      <el-table :data="list" height="100%">
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="性别" prop="male"></el-table-column>
        <el-table-column label="生日" prop="birthday"></el-table-column>
      </el-table>
    </div>
    <div class="c-pagePanel">
      <el-pagination
        layout="prev, pager, next"
        :current-page="pageIndex"
        :page-size="10"
        :total="total"
        @current-change="onCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
/**
 * 分页表格
 * 自定义事件:
 * 页号改变时触发: currentChange(newPageIndex)
 */
export default {
  name: "PageTable",
  props: {
    /**
     * 分页结果集
     */
    list: {
      type: Array,
      default: () => [],
    },
    /**
     * 总记录数
     */
    total: {
      type: Number,
      default: 0,
    },
    /**
     * 页号
     */
    pageIndex: {
      type: Number,
      default: 1,
    },
  },
  methods: {
    onCurrentChange(newPageIndex) {
      this.$emit("currentChange", newPageIndex);
    },
  },
};
</script>

<style scoped lang="scss">
.c-pageContainer {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.c-tablePanel {
  flex: 1;
}
.c-pagePanel {
  height: 50px;
  display: flex;
  justify-content: flex-end;
}
</style>
